import React from 'react'
import { connect } from 'dva'
import LwjTable from 'components/LwjTable/LwjTable'
import StoreModal from "./StoreModal";
import StoreFastModal from "./StoreFastModal"
import ProductsModal from "./ProductsModal"
import queryString from 'query-string'
import { Button, Row, Col, Modal, Switch, Divider, Popover, message } from 'antd'
//常用组件
import PageHeaderLayout from 'components/Layout/PageHeaderLayout'
import NormalFilter from 'components/Filter/NormalFilter'
import { Page } from 'components'
//样式
import styles from './StoreList.less'

const StoreList = ({ location, dispatch, storelist, app, loading }) => {

  //数据
  const {
    list,
    pagination,
    store,
    currentItem,
    libraryVisible,
    fastVisible,
    commodityStoreList,
    currentOption,
    cateList,
    originCateList
  } = storelist;

  //导航栏
  const breadcrumbList = [{
    title: "商品管理"
  }, {
    title: "商品门店管理"
  }];

  //筛选
  const filterProps = {
    filterItems: [
      {
        type: 'input',
        id: 'name',
        title: '门店',
        placeholder: '请输入门店关键字搜索'
      }
    ],
    onFilterChange(value) {
      dispatch({
        type: 'storelist/changeFilter',
        searchKeyword: value.name
      })
      dispatch({
        type: 'storelist/query',
        payload: {
          start: 0,
          limit: pagination.pageSize
        }
      })
    }
  }

  //表格参数
  const columns = [
    {
      title: '店铺名称',
      dataIndex: 'displayName',
      key: 'displayName',
      width: "20%",
    },
    {
      title: '门店名称',
      dataIndex: 'name',
      key: 'name',
      width: "10%",
    }, {
      title: '门店运营',
      dataIndex: 'distributorOperator',
      key: 'distributorOperator',
      width: "10%",
    }, {
      title: '地址',
      dataIndex: 'address',
      key: 'address',
      width: "25%",
    }, {
      title: '操作',
      key: 'handle',
      width: "35%",
      render: (text, record) => {
        return (
          <span>
            <a onClick={() => toggleModal(true, record.id)}>商品管理</a>
            {record.commodityStoreStatus !== "DONE" && <Divider type="vertical" />}
            {record.commodityStoreStatus !== "DONE" && <a onClick={() => setLibrary(record)}>设为商品库</a>}
            {<Divider type="vertical" />}
            {<a onClick={() => setFast(record)}>快速分配商品库</a>}
          </span>
        )
      }
    }
  ]

  // 表格属性
  const tableProps = {
    dataSource: list,
    loading: loading.global,
    pagination,
    pageChangeAction: 'storelist/query',
    dispatch,
    location
  };
  const setCurrentItem = (record) => {
    dispatch({
      type: 'storelist/setCurrentItem',
      payload: record
    })
  }
  const setLibrary = (record) => {
    setCurrentItem(record)
    dispatch({
      type: 'storelist/setLibraryVisible',
      payload: true
    })
  }
  const setFast = (record) => {
    setCurrentItem(record)
    dispatch({
      type: 'storelist/setFastVisible',
      payload: true
    })
    // dispatch({
    //   type: 'storelist/allList'
    // })
  }

  // 切换弹窗
  const toggleModal = (flag, id) => {
    dispatch({
      type: 'storelist/toggleModal',
      flag: flag,
      id: id
    })
    if (flag) {
      dispatch({
        type: 'storelist/productList',
        payload: {
          start: 0,
          limit: 10
        }
      })
    }
  }

  return (
    <PageHeaderLayout title="商品门店管理" breadcrumbList={breadcrumbList}>
      <StoreFastModal visible={fastVisible} dispatch={dispatch} currentItem={currentItem} loading={loading} commodityStoreList={commodityStoreList} currentOption={currentOption}/>
      <StoreModal visible={libraryVisible} dispatch={dispatch} currentItem={currentItem} />
      <ProductsModal dispatch={dispatch} store={store} cates={cateList} originCates={originCateList} toggleModal={toggleModal} loading={loading}/>
      <Page inner>
        <NormalFilter {...filterProps} />
        <LwjTable {...tableProps} columns={columns} />
      </Page>
    </PageHeaderLayout>
  )
}


export default connect(({ storelist, app, loading }) => ({ storelist, app, loading }))(StoreList)
